<template>
  <div class="travel-page">
    <!-- 固定头部 -->
    <div class="fixed-header">
      <h1 class="lock-title">我的旅行</h1>
      <div>
        <el-link type="info" @click="findRecently">最近预定</el-link> -
        <el-link type="info" @click="findAccomplish">已完成</el-link> -
        <el-link type="info" @click="handleFavoriteClick">喜欢</el-link>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrap">
      <el-card
          v-for="(item, index) in orderData"
          :key="index"
          class="booking-card"
      >
        <el-row :gutter="20">
          <!-- 图片列 -->
          <el-col :span="8">
            <div class="hotel-image">
              <img
                  :src="item.image"
                  alt="民宿图片"
                  class="cover-image"
              >
            </div>
          </el-col>


          <!-- 信息列 -->
          <el-col :span="16">
            <div class="booking-info">
              <div class="date-people">{{ item.checkInDate }}-{{ item.checkOutDate }}</div>
              <div class="date-people">{{item.rooms}}间-{{item.guests}}人</div>
              <h3 class="hotel-name">{{ item.hotelName }}</h3>
              <div class="price-section">
                <span class="price">{{ item.pricePerNight }}</span>
                <span class="unit">/每晚</span>
              </div>
              <div class="location">
                {{ item.location }}
                <span class="distance">{{ item.distance }}</span>
              </div>
              <div class="rating-section">
                <el-rate
                    v-model="item.rating"
                    disabled
                    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                />
                <span class="comment-count">{{ item.comments }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!--    底部导航-->
    <div class="bottom-navigation">
        <button @click="discover"><i class="el-icon-search"></i><br/>发现</button>
        <button @click="travel"><i class="el-icon-star-off"></i><br/>旅行</button>
        <button @click="myProfile"><i class="el-icon-user"></i><br/>我的</button>
    </div>
  </div>
</template>

<script>
const url = 'http://localhost:6001/api';
export default {
  data() {
    return {
      user:{},
      orderData: [],
      tavernIds:[],
      commentNumber:0,
    }
  },
  methods: {

    findAccomplish(){

    },
    findRecently(){
      this.$router.push(`/travel`);
    },
    handleFavoriteClick(){
      this.$router.push(`/Like`);
    },
    findOrder() {
      this.axios.get(url + '/order/findOrder', {
        params: {
          userId: this.user.userid
        }
      }).then(res => {
        this.orderData = res.data
        this.tavernIds = res.data.map(item => item.tavernId)
        console.log(this.tavernIds)
        this.findTavern(this.tavernIds)
      })
    },
    findTavern(tavernIds) {
      tavernIds.forEach(tavernId => {
        this.axios.get(url + '/order/findTavern', {
          params: {
            tavernId: tavernId
          }
        }).then(res => {
          this.commentNumber = res.data.length
        })
      })
    },
    discover() {
      this.$router.push(`/homePage`);
    },
    travel() {
      this.$router.push('/travel');
    },
    myProfile() {
      if (this.$route.path !== '/Wo') {
        this.$router.push('/Wo');
      }
    }
  },
  created() {
    const userStr = sessionStorage.getItem("user");
    this.user = JSON.parse(userStr);
    console.log(this.user)
    this.findOrder();
    this.findTavern();
  }
}
</script>

<style scoped>
/* 固定头部 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px 30px 0;
}

.lock-title {
  user-select: none;
  cursor: default;
  font-size: 24px;
  color: #303133;
  margin: 0 0 15px 0;
  padding: 10px 0;
}

/* 内容区域 */
.content-wrap {
  margin-top: 140px;
  padding: 20px 30px;
}

.booking-card {
  margin-bottom: 20px;
}

/* 图片样式 */
.hotel-image {
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 信息样式 */
.booking-info {
  padding: 10px;
}

.hotel-name {
  margin: 10px 0;
  font-size: 20px;
  color: #303133;
}

.price-section {
  margin: 15px 0;
}

.price {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}

.unit {
  color: #909399;
  font-size: 14px;
}

.location {
  color: #606266;
  margin: 10px 0;
}

.distance {
  color: #909399;
  margin-left: 10px;
}

.rating-section {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.comment-count {
  color: #909399;
  margin-left: 10px;
  font-size: 14px;
}
</style>
